<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/6/20/0020
  Time: 14:03
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<div class="easyui-layout" data-options="fit:true,border:false">
    <div data-options="region:'center',border:false" style="padding: 15px">
    <progress id="progressBar" value="0" max="100"></progress>
    <span id="pec"></span>
    <input type="file" id="file" name="file"/>
    <input type="button" onclick="UpladFile()" value="上传"/>
    <img src="" alt="" id="img" width="400" height="400">

</div>
</div>
<script>
    function UpladFile() {
        var fileObj = document.getElementById("file").files[0]; // 获取文件对象
        var FileController = "/qiniu/upload";                    // 接收上传文件的后台地址
        // FormData 对象
        var form = new FormData();
        form.append("file", fileObj);                           // 文件对象
        // XMLHttpRequest 对象
        var xhr = new XMLHttpRequest();
        xhr.open("post", FileController, true);
        xhr.onload = function () {
            var src = JSON.parse(this.response).obj;
            console.log(src);
            var img = document.getElementById('img');
            img.src = src;
        };
        xhr.upload.addEventListener("progress", progressFunction, false);
        xhr.send(form);
    }

    function progressFunction(evt) {
        var progressBar = document.getElementById("progressBar");
        if (evt.lengthComputable) {
            progressBar.max = evt.total;
            progressBar.value = evt.loaded;
            var percent = (progressBar.value / progressBar.max).toFixed(2);
            document.getElementById('pec').innerText = percent * 100 + "%";
        }
    }
</script>
</body>
</html>
